HTML <IMG ...> tag ALT attributes

You should always add ALT="..." text to your IMG tags, because otherwise what Lynx users will see are non-informative and annoying "[IMAGE]" or "[INLINE]" markers.

See also Alan Flavell's discussion of the use of ALT texts in IMGs.

Contents

• Tom Neff
• Eric Bohlman
• Frames

From: tneff@panix.com (Tom Neff)
Subject: Re: Thoughts on the ALT attribute
Date: Thu Aug 17 20:19:16 CDT 1995
Newsgroups: comp.infosystems.www.authoring.html

In article <410m09$hv@decaxp.harvard.edu>, Andrew Pimlott <pimlott@math.harvard.edu> wrote:

>I'd like to poll some opinions on the best use of the alt attribute. Do you think the alternate text should be primarily intended to

• make the page flow as smoothly as possible for someone who will never see the images, or
• give a hint of what the graphics are about, for those who have graphical capabilities but don't want to load every image.

Good question -- I'm pleased that anyone even asks.

The ALT attribute is designed to show something to the user who's not loading in-line images, for whatever reason (necessity, bandwidth, instructions from Planet Zorkon, etc). Therefore the text it presents should fit smoothly and logically into your page's message, doing the job of the missing image -- not making some confusing or disruptive reference to the fact the images are turned off.

I have seen every kind of egregious misuse of ALT, ranging from "Get a real browser!" to "Image you can't see", and so forth. Ptui. Here are my rules:

1. If the inline image is a simple bullet or arrow or other decorative dingbat, use an asterisk or equivalent: ALT="*"
2. If the inline image is something with no informational value and no easy ASCII equivalent, and is not a link, just use ALT=""
   [One thing you generally shouldn't do is include ALT="" on an image which is the only thing in an <A HREF=...> link -- or Lynx users won't see the link at all. However, this is a good way to make clickable imagemaps -- which most versions of Lynx can't use anyway -- invisible to Lynx users; just be sure to provide a text alternative to the imagemap. -- HC]
3. If the inline image is a thumbnail link that downloads a larger picture (like a full size JPEG) or a sound or movie file when clicked, use an ALT text that describes the action to be performed when the non image-loading user selects it:

   <A HREF="bigpic.jpg"> <IMG SRC="thumbn.gif" ALT="[Get picture]"> </A>
   <A HREF="song.au"> <IMG SRC="ear.gif" ALT="[Hear song]"> </A>

4. If the inline image is a logo or other element whose main focus is some rendered text that an image-loading user will see and read, let the ALT text deliver the equivalent message.

   <IMG SRC="ourlogo.gif" ALT="ACME FLANGE INC.">

   Don't do something idiotic like ALT="Company logo"!!

If you follow these rules you will have pages usable everywhere. Remember that Lynx users, among many other non-image-loading Web users, can get and download sounds, pictures and movies from external links! Don't assume that ALT text readers are helpless -- they're not.

--
Tom Neff :: tneff@panix.com :: <URL:http://www.panix.com/~tneff/>

From: ebohlman@netcom.com (Eric Bohlman)
Newsgroups: alt.comp.blind-users, comp.infosystems.www.authoring.html
Subject: Re: using the internet
Date: Thu, 18 Jan 1996 02:49:57 GMT

Jorn Barger (jorn@MCS.COM) wrote:

>I'd like to hear how designers of Web sites can modify their pages to make them more accessible to visually impaired users.

In print media, making a document accessible to a blind person takes a great deal of extra effort. On the Web, making a document accessible to a blind person takes almost no effort at all; in fact, making a document inaccessible to a blind person (through means like converting text to graphics before the document is served) requires extra effort.

For partially-sighted users, the main thing you need to do (which is a good general principle of Web authoring anyway) is make sure you don't get in the way of their setting their browsers to render colors and fonts in the most readable way. Also, avoid using background images that make text hard to read.

For users who need to use speech or braille to access their browser, the most important thing (which again is a good general principle) is to make sure that all the navigational information such as links is available in textual as well as graphical form. That means using ALT= text on all images that are used as links, and not using imagemaps as the only means of navigation. Also, do not use images of text in place of actual text (if you absolutely must, use ALT= text). There's no need to describe images that are purely decorative (use ALT="" on them so the browser doesn't display annoying "image here" markers). If an image represents content rather than decoration, describe it sufficiently that the user could decide whether or not to download it (for example, a blind parent might want to download pictures for his or her kids).

Once you've observed these principles, read the text on your page out loud, going strictly from left to right and top to bottom. If it makes sense when read that way, it will be accessible to speech or braille users. It will help to look at the page in a text browser like Lynx, and in a graphical browser with inline image downloading turned off (the latter configuration is also used by about one-third of sighted users of graphical browsers, due to slow communication channels).

Frames

Smaller version of above image.
Background tile of above image.

A whole separate issue is frames; if, for some unaccountable reason, you have an urge to use them (though I have never quite fathomed why somebody would want to transform a perfectly good large browser window into an unsatisfactorily small browser window), then do provide meaningful links in the NOFRAMES section, for non-frames-aware browsers (note that many other browsers besides Lynx fall into this category).

P.S. Feel free to use the images on this page in your own Web pages. The anti-frames and "Enhanced for Lynx" images are by myself, the "Lynx-Friendly" image by Brandi Weed, and the remaining image was taken from the Lynx-Enhanced Images page.